<!-- 逻辑 -->
<script setup lang="ts">
// 1.导入工具函数
import { reactive } from 'vue';

// 2.定义响应式的对象
let food = reactive({
  name: '隆江猪脚饭',
  price: 18,
  foods: ['米饭', '猪脚', '酸菜', '半个卤蛋']
})

// 不支持普通类型
// let num = reactive(998)

// setTimeout(() => {
//   // 不要重新赋值: 如果重新赋值普通数据, 会丢失响应性
//   food = {name: '', price: 0, foods: []}
//   console.log('123')
// }, 3000)
</script>

<!-- 结构 -->
<template>
<p @click="food.name='祖传隆江猪脚饭'">{{ food.name }}</p>
<p @click="food.price++">{{ food.price }}</p>
<p @click="food.foods.push('鸡腿')">{{ food.foods }}</p>
</template>

<!-- 样式 -->
<style scoped>

</style>
